<template>
    <div class="login-box">
        <h2>登录页面</h2>
        <p><input type="text" v-model="value" class="phone" placeholder="请输入手机号登录"></p>
        <p>
            <button class="btn btn-cancel" @click="cancel">取消</button>
            <button class="btn btn-ok" @click="sure">确定</button>
        </p>
    </div>
</template>

<script>
    export default {
        props: {
            value: String
        },
        data: () => {
					return {

					}
        },
				methods: {
					sure(){
						this.$emit('toLogin')
					},
					cancel(){
						this.$emit('toCancel')
					}
				}
    }
</script>

<style scoped>
    .login-box {
        border: 1px solid #ccc;
        padding: 24px;
        background-color: #fff;
        border-radius: 6px;
        height: 180px;
				opacity: 1;
    }
    .phone {
        border: 1px solid #ccc;
        height: 36px;
        line-height: 36px;
        border-radius: 6px;
        padding-left: 10px;
    }
    .btn {
        margin-top: 12px;
        background-color: blue;
        padding: 6px 14px;
        color: #fff;
        border: none;
        border-radius: 6px;
        margin-left: 15px;
        
    }
    .btn-ok {
        margin-top: 12px;
        background-color: blue;
    }
    .btn-cancel {
        color: #666;
        background-color: #efefef;
    }

</style>